<template>
  <!-- <van-pull-refresh v-model="isLoading" @refresh="onLoad"> -->
  <!-- <van-list :finished="finished" @load="onLoad"  > -->
  <view>
    <van-empty v-if="market.length === 0 && finished" :description="$t('empty.default')" />
    <template v-else>
      <van-cell v-for="item in market" :key="item.id" @click="goDetail(item)">
        <div class="asset-item">
          <div class="center">
            <div class="name">
              {{ item.market_name }}
              <van-tag v-if="findRobot(item.id) && findRobot(item.id).recycle_status == 1" round type="primary">
                {{ $t('cycle_strategy') }}
              </van-tag>
              <van-tag v-if="findRobot(item.id) && findRobot(item.id).recycle_status == 0" round type="primary">
                {{ $t('single_strategy') }}
              </van-tag>
            </div>
            <div v-if="findRobot(item.id)" class="info">
              <p>
                {{ $t('expected_return') }}：{{ Number(findRobot(item.id).revenue) | numberFormat(5) }} {{ item.money }}
              </p>
              <p class="van-ellipsis">
                {{ $t('number_positions') }}：{{ getDeal(findRobot(item.id).values_str) }} {{ item.stock }}
              </p>
            </div>
          </div>
          <div class="right">
            <template v-if="findRobot(item.id)">
              <span v-if="findRobot(item.id) && findRobot(item.id).status === 0">{{ $t('status.disabled') }}</span>
              <van-icon name="arrow" />
            </template>
            <van-button v-else size="small" style="border: none" @click="addRobot(item)">
              <span style="display: inline-block; vertical-align: middle">{{ $t('add_robot') }}</span>
              <van-icon style="vertical-align: middle" name="plus" />
            </van-button>
          </div>
        </div>
      </van-cell>
    </template>
  </view>
  <!-- </van-list> -->
  <!-- </van-pull-refresh> -->
</template>

<script>
  import {
    mapState,
    mapActions,
    mapGetters
  } from 'vuex'
  export default {
    props: {
      platform: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        finished: false,
        isLoading: false
      }
    },
    computed: {
      ...mapState({
        robotData: ({
          robot
        }) => robot.robotList
      }),
      ...mapGetters({
        markets: 'robot/markets'
      }),
      market() {
        return this.markets(this.platform) || []
      }
    },
    methods: {
      ...mapActions({
        marketList: 'robot/marketList',
        robotList: 'robot/robotList'
      }),
      loadData() {
        this.finished = false
        this.marketList({
          platform: this.platform,
          type: 'spot'
        })
        this.finished = true
        this.isLoading = false
      },
      onLoad() {
        this.loadData()
        this.robotList()
      },
      findRobot(id) {
        return this.robotData.filter(item => item.market_id === id)[0]
      },
      goDetail(item) {
        if (this.findRobot(item.id)) {
          nextTick(() => {
            // router.push({
            //   name: 'robot',
            //   query: { market_id: item.id }
            // })
            uni.navigateTo({
              url: '../../robot/index'
            })
          })
        }
      },
      addRobot(item) {
        // router.push({
        //   name: 'robot-form',
        //   query: {
        //     type: 'create',
        //     platform: this.platform,
        //     data: JSON.stringify(item)
        //   }
        // })
        uni.navigateTo({
          url: '../../robot/form'
        })
      },
      getDeal(values) {
        if (values) {
          const valueJson = JSON.parse(values)
          return Number(valueJson.deal_amount).toFixed(6) || '-'
        }
        return '-'
      }
    }
  }
</script>

<style scoped lang="less">
  .asset-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left,
    .right {
      flex-shrink: 0;
    }

    .right {
      text-align: right;
      font-size: 12px;
      color: #888888;
    }

    .center {
      flex-grow: 1;
      min-width: 0;
    }

    .name {
      color: #333333;
      font-size: 16px;
      font-weight: 500;
    }

    .info {
      font-size: 12px;
      color: #888888;
    }

    .btn {
      height: auto;
      padding: 5px;
    }
  }
</style>
